<template>
    <div class="ml-16px mr-16px content-container">
        <div class="flex justify-between pt-26px pl-26px pr-26px">
            <div class="flex items-center">
                <el-button type="primary">授权新账号</el-button>
                <img src="@/assets/images/web-text.png" class="ml-14px">
            </div>
            <div class="w-180px">
                <el-select v-model="website" placeholder="选择平台进行筛选">
                    <el-option
                        v-for="item in state.websites"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>
        </div>
        <div class="flex flex-center pt-40px pb-40px">
            <div class="web-list">
                <div class="web-icon"></div>
                <div class="web-bg"></div>
                <div class="flex flex-center flex-col mt-40px user-info">
                    <p class="flex">
                        <b style="background-image:url('https://img1.baidu.com/it/u=967908246,3035307116&fm=253&fmt=auto&app=138&f=JPEG?w=332&h=500')"></b>
                        <mark>正常</mark>
                    </p>
                    <div class="mt-16px mb-16px text-20px font-bold">落日综温柔</div>
                    <span class="mb-16px text-14px text-[#999]">昵称：安徽科幂仪器</span>
                    <button>+ 加标签</button>
                </div>
                <ul class="flex flex-center flex-wrap">
                    <li>
                        <b>279</b>
                        <p>视频</p>
                    </li>
                    <li>
                        <b>279</b>
                        <p>播放</p>
                    </li>
                    <li>
                        <b>279</b>
                        <p>评论</p>
                    </li>
                    <li>
                        <b>279</b>
                        <p>点赞</p>
                    </li>
                    <li>
                        <b>279</b>
                        <p>转发</p>
                    </li>
                    <li>

                    </li>
                </ul>
                <div class="flex flex-center btns">
                    <button><span><svg-icon size="16px" icon-class="briefcase-line" class="mr-4px"></svg-icon>商机管理</span></button>
                    <button><span><svg-icon size="16px" icon-class="medal-line" class="mr-4px"></svg-icon>账号授权更新</span></button>
                </div>
            </div>
            <div class="web-list ks">
                <div class="web-icon"></div>
                <div class="web-bg"></div>
                <div class="flex flex-center flex-col mt-40px user-info">
                    <p class="flex">
                        <b style="background-image:url('https://img1.baidu.com/it/u=967908246,3035307116&fm=253&fmt=auto&app=138&f=JPEG?w=332&h=500')"></b>
                        <mark>正常</mark>
                    </p>
                    <div class="mt-16px mb-16px text-20px font-bold">落日综温柔</div>
                    <span class="mb-16px text-14px text-[#999]">昵称：安徽科幂仪器</span>
                    <button>+ 加标签</button>
                </div>
                <ul class="flex flex-center flex-wrap">
                    <li>
                        <b>279</b>
                        <p>视频</p>
                    </li>
                    <li>
                        <b>279</b>
                        <p>播放</p>
                    </li>
                    <li>
                        <b>279</b>
                        <p>评论</p>
                    </li>
                    <li>
                        <b>279</b>
                        <p>点赞</p>
                    </li>
                    <li>
                        <b>279</b>
                        <p>转发</p>
                    </li>
                    <li>

                    </li>
                </ul>
                <div class="flex flex-center btns">
                    <button><span><svg-icon size="16px" icon-class="briefcase-line" class="mr-4px"></svg-icon>商机管理</span></button>
                    <button><span><svg-icon size="16px" icon-class="medal-line" class="mr-4px"></svg-icon>账号授权更新</span></button>
                </div>
            </div>
            <div class="web-list xg">
                <div class="web-icon"></div>
                <div class="web-bg"></div>
                <div class="flex flex-center flex-col mt-40px user-info">
                    <p class="flex">
                        <b style="background-image:url('https://img1.baidu.com/it/u=967908246,3035307116&fm=253&fmt=auto&app=138&f=JPEG?w=332&h=500')"></b>
                        <mark>正常</mark>
                    </p>
                    <div class="mt-16px mb-16px text-20px font-bold">落日综温柔</div>
                    <span class="mb-16px text-14px text-[#999]">昵称：安徽科幂仪器</span>
                    <button>+ 加标签</button>
                </div>
                <ul class="flex flex-center flex-wrap">
                    <li>
                        <b>279</b>
                        <p>视频</p>
                    </li>
                    <li>
                        <b>279</b>
                        <p>播放</p>
                    </li>
                    <li>
                        <b>279</b>
                        <p>评论</p>
                    </li>
                    <li>
                        <b>279</b>
                        <p>点赞</p>
                    </li>
                    <li>
                        <b>279</b>
                        <p>转发</p>
                    </li>
                    <li>

                    </li>
                </ul>
                <div class="flex flex-center btns">
                    <button><span><svg-icon size="16px" icon-class="briefcase-line" class="mr-4px"></svg-icon>商机管理</span></button>
                    <button><span><svg-icon size="16px" icon-class="medal-line" class="mr-4px"></svg-icon>账号授权更新</span></button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
const website = ref()

const state = reactive({
    websites:[
        {
            label:'抖音',
            value:1
        },
        {
            label:'快手',
            value:2
        },
        {
            label:'头条',
            value:3
        },
        {
            label:'西瓜',
            value:4
        },
        {
            label:'B站',
            value:5
        },
    ]
})
</script>

<style lang="scss" scoped>
.web-list{
    width: 428px;
    height: 500px;
    margin: 0 30px;
    border-radius: 8px;
    overflow: hidden;
    position:relative;
    box-shadow:0px 4px 10px 0px rgba(0,0,0,0.08);
    background-image:-moz-linear-gradient(-90deg,rgb(187,209,255)0%,rgb(238,244,255)23%,rgb(255,255,255)47%);
    background-image:-webkit-linear-gradient(-90deg,rgb(187,209,255)0%,rgb(238,244,255)23%,rgb(255,255,255)47%);
    background-image:-ms-linear-gradient(-90deg,rgb(187,209,255)0%,rgb(238,244,255)23%,rgb(255,255,255)47%);

    .web-icon{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 70px;
        height: 31px;
        background-image: url("@/assets/images/dy.png");
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .web-bg{
        position: absolute;
        top: 0;
        right: 10px;
        z-index: 2;
        width: 136px;
        height: 142px;
        background-image: url("@/assets/images/dy-b.png");
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .user-info{
        p{
            width: 80px;
            height: 80px;
            position:relative;
            z-index:9;
            b{
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center center;
            }
            mark{
                position:absolute;
                right:0;
                bottom:0;
                font-size: 12px;
                font-weight: normal;
                color: #fff;
                background-color: #68c634;
                border-radius: 3px;
                padding:3px 4px;
            }
        }
        button{
            height: 30px;
            font-size: 14px;
            padding:0 12px;
            color: var(--mainColor);
            border:1px solid var(--mainColor);
            border-radius: 15px;
            background-color:#fff;
            transition:all 0.3s;
            &:hover{
                color: #fff;
                background-color: var(--mainColor);
                transition:all 0.3s;
            }
        }
    }
    ul{
        padding:24px 0;
        li{
            width:33.33%;
            text-align: center;
            padding: 14px 0;
            position:relative;
            b{
                font-size: 22px;
                font-family: "DIN Web";
            }
            p{
                font-size: 14px;
                color: #999;
                margin-top: 10px;
            }
            &::after{
                content:'';
                width:1px;
                height:36px;
                position:absolute;
                right:0;
                top:50%;
                transform:translateY(-50%);
                background-color:var(--menuBorderColor);
            }
            &:nth-child(3){
                &::after{
                    display: none;
                }
            }
            &:nth-child(5){
                &::after{
                    display: none;
                }
            }
            &:nth-child(6){
                &::after{
                    display: none;
                }
            }
        }
    }
    .btns{
        button{
            width: 136px;
            height: 32px;
            color: #fff;
            font-size: 14px;
            border-radius: 3px;
            background-color: #427aed;
            span{
                align-items: center;
                display: inline-flex;
            }
            &:last-child{
                border:1px solid #427aed;
                color: #427aed;
                background-color: #fff;
                margin-left: 12px;
            }
        }
    }
    &.ks{
        background-image:-moz-linear-gradient(-90deg,rgb(255,213,175)0%,rgb(255,243,232)24%,rgb(255,255,255)46%);
        background-image:-webkit-linear-gradient(-90deg,rgb(255,213,175)0%,rgb(255,243,232)24%,rgb(255,255,255)46%);
        background-image:-ms-linear-gradient(-90deg,rgb(255,213,175)0%,rgb(255,243,232)24%,rgb(255,255,255)46%);

        .web-icon{
            background-image: url("@/assets/images/ks.png");
        }
        .web-bg{
            background-image: url("@/assets/images/ks-b.png");
        }
        .user-info{
            button{
                color:#fa7217;
                border-color: #fa7217;
                &:hover{
                    color:#ffffff;
                    background-color: #fa7217;
                }
            }
        }
        .btns{
            button{
                background-color: #fa7217;
                &:last-child{
                    border:1px solid #fa7217;
                    color: #fa7217;
                    background-color: #fff;
                }
            }
        }
    }
    &.xg{
        background-image:-moz-linear-gradient(-90deg,rgb(255,191,191)0%,rgb(255,237,237)24%,rgb(255,255,255)46%);
        background-image:-webkit-linear-gradient(-90deg,rgb(255,191,191)0%,rgb(255,237,237)24%,rgb(255,255,255)46%);
        background-image:-ms-linear-gradient(-90deg,rgb(255,191,191)0%,rgb(255,237,237)24%,rgb(255,255,255)46%);

        .web-icon{
            background-image: url("@/assets/images/xg.png");
        }
        .web-bg{
            background-image: url("@/assets/images/xg-b.png");
        }
        .user-info{
            button{
                color:#ed3c3a;
                border-color: #ed3c3a;
                &:hover{
                    color:#ffffff;
                    background-color: #ed3c3a;
                }
            }
        }
        .btns{
            button{
                background-color: #ed3c3a;
                &:last-child{
                    border:1px solid #ed3c3a;
                    color: #ed3c3a;
                    background-color: #fff;
                }
            }
        }
    }
}
</style>